export const performanceMap = async (echarts, data) => {
 
 let option = {
    title: {
      text: '性能监控'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
   tooltip: {
     trigger: 'axis',
     formatter: function (params) {
       let tar = params[0]
       let times = null
       if (tar.name.includes('FP') || tar.name.includes('FCP')) {
         times='1800ms-3000ms'
       // eslint-disable-next-line no-dupe-else-if
       } else if (tar.name.includes('LCP')) {
         times = '2500ms-4000ms'
       } else if (tar.name.includes('FID')) {
         times = '100ms-300ms'
       }
       let html = `
       <div style="width:120px;height:60px;font-siez:10px;color:azure;text-align:center;background-color:rgba(0,0,0,0.5)">
       ${tar.name} <br/> 耗时 : ${tar.value.toFixed(2) }ms 
        <p style="color:black">${times}</p>
        <div style="width:33%;height:20px;float:left;background-color:#0dcd6b">优</div>
        <div style="width:33%;height:20px;float:left;background-color:#ffa400">良</div>
        <div style="width:34%;height:20px;float:left;background-color:#ff4e3f">差</div>
        </div>`
         return html
     }
   },
    xAxis: {
      type: 'category',
      axisLabel: {
        rotate: 20 // 倾斜度
      },
      data: ['FP(白屏)', 'FCP(首屏)', 'LCP(最大图像绘制)', 'FID(首次交互)', 'CLS(布局偏移)' ]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Step Start',
        type: 'line',
        step: 'start',
        data: []
      }
    ]
  };
  const getData = () => {
    let value = []
    data.forEach(e => {
      value.push(e.time)
    });
    option.series[0].data = value
    let myChart = echarts.init(document.getElementById('performance'), 'dark');
    myChart.setOption(option);
    
  }
  getData()

 


}
